<template>
    <div style="padding: 10px;display:flex;">
        <div style="min-width:222px;margin-right:10px;">
            <!-- 立刻 初始化-->
            <leftTree :code="'eventhandlers'"
                      @nodeClick="nodeClick"
                      :immediate="true"
            >
            </leftTree>
        </div>
        <div style="width:650px;">
            <el-form :model="queryParams" ref="queryForm" class="queryForm" :inline="true" v-show="showSearch"
                     @submit.native.prevent>
                <el-form-item label="名称" desc="名称" prop="name">
                    <el-input v-model.trim="queryParams.name" placeholder="名称" clearable size="small"
                              style="width:120px;"
                              @keyup.enter.native="handleQuery" />
                </el-form-item>
                <!--   <el-form-item label="标识码" desc="标识码" prop="code">
                       <el-input v-model.trim="queryParams.code" placeholder="标识码" clearable size="small"
                                 style="width:120px;"
                                 @keyup.enter.native="handleQuery" />
                   </el-form-item>-->
                <el-form-item label="处理类型" desc="处理类型 1内部方法     5外部接口" prop="handleType">
                    <dic-select v-model="queryParams.handleType" :code="dicInner.mes_bpm_handle_handleType"
                                placeholder="处理类型 " clearable size="small" style="width:120px;"
                                @keyup.enter.native="handleQuery" />
                </el-form-item>
                <!--   <el-form-item label="状态" desc="状态 1 待审核 5使用中 10己关闭" prop="state">
                       <dic-select v-model="queryParams.state" :code="dicInner.mes_bpm_handle_state"
                                   placeholder="状态 1 待审核 5使用中 10己关闭" clearable size="small" style="width:120px;"
                                   @keyup.enter.native="handleQuery" />
                   </el-form-item>-->
                <!--    <el-form-item label="业务状态标识码" desc="业务状态标识码" prop="handleValue">
                        <el-input v-model.trim="queryParams.handleValue" placeholder="业务状态标识码" clearable size="small"
                                  style="width:120px;" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="业务状态标识码" desc="业务状态标识码" prop="handleParam">
                        <el-input v-model.trim="queryParams.handleParam" placeholder="业务状态标识码" clearable size="small"
                                  style="width:120px;" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="业务状态标识码" desc="业务状态标识码" prop="handleHead">
                        <el-input v-model.trim="queryParams.handleHead" placeholder="业务状态标识码" clearable size="small"
                                  style="width:120px;" @keyup.enter.native="handleQuery" />
                    </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @submit.native.prevent
                               @click="handleQuery">
                        搜索
                    </el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            
            <el-row :gutter="10" class="mb8">
                <template v-if="'操作按钮'">
                    <template v-if="action=='选择器'"></template>
                    <template v-else>
                        <el-col :span="1.5" class="buttonsRow">
                            <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
                        </el-col>
                    </template>
                
                </template>
                
                <right-toolbar @layout="(_obj)=>columnsHidden=_obj" :showSearch.sync="showSearch"
                               @queryTable="getInfoList"></right-toolbar>
            </el-row>
            <section class="tablecontainer">
                <el-table border ref="multipleTable" :data="dataList" size="mini" class="tabletop" tooltip-effect="dark"
                          style="width: 100%" @selection-change="rows=>{         selectRows=rows      }"
                          @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                          :row-class-name="tableRowClassName"
                          @row-dblclick="dbclick"
                >
                    <el-table-column type="selection" width="40"></el-table-column>
                    <el-table-column v-if="!columnsHidden['name']" label="名称" prop="name" min-width="120px;">
                        <template slot-scope="scope">
                            <div> {{scope.row.name}}</div>
                        </template>
                    </el-table-column>
                    <!--      <el-table-column v-if="!columnsHidden['code']" label="标识码" prop="code" min-width="120px;">
                              <template slot-scope="scope">
                                  <div> {{scope.row.code}}</div>
                              </template>
                          </el-table-column>-->
                    <el-table-column v-if="!columnsHidden['handleType']" label="处理类型 " prop="handleType"
                                     min-width="120px;">
                        <template slot-scope="scope">
                            <dic-tag :code="dicInner.mes_bpm_handle_handleType"
                                     v-model="scope.row.handleType"></dic-tag>
                        </template>
                    </el-table-column>
                    <!--      <el-table-column v-if="!columnsHidden['state']" label="状态" prop="state" min-width="120px;">
                              <template slot-scope="scope">
                                  <dic-tag :code="dicInner.mes_bpm_handle_state" v-model="scope.row.state"></dic-tag>
                              </template>
                          </el-table-column>-->
                    <el-table-column v-if="!columnsHidden['handleValue']" label="处理执行方法" prop="handleValue"
                                     min-width="120px;">
                        <template slot-scope="scope">
                            <div> {{scope.row.handleValue}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="!columnsHidden['handleParam']" label="事件参数" prop="handleParam"
                                     min-width="120px;">
                        <template slot-scope="scope">
                            <div> {{scope.row.handleParam}}</div>
                        </template>
                    </el-table-column>
                    <!--  <el-table-column v-if="!columnsHidden['handleHead']" label="业务状态标识码" prop="handleHead"
                                       min-width="120px;">
                          <template slot-scope="scope">
                              <div> {{scope.row.handleHead}}</div>
                          </template>
                      </el-table-column>-->
                    <!--   <el-table-column v-if="!columnsHidden['classId']" label="所属分类" prop="classId" min-width="120px;">
                           <template slot-scope="scope">
                               <div> {{scope.row.classId}}</div>
                           </template>
                       </el-table-column>-->
                    
                    <template v-if="'添加时间-更新时间'">
                        <template v-if="action==='选择器'">
                        
                        </template>
                        <template v-else>
                            <el-table-column label="添加时间/人" prop="add_time/add_user"
                                             v-if="!columnsHidden['add_time/add_user']">
                                <template slot-scope="scope">
                                    <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                             v-if="!columnsHidden['lastEditTime/editUser']">
                                <template slot-scope="scope"><span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                                </template>
                            </el-table-column>
                        </template>
                    </template>
                    <template v-if="'操作'">
                        <template v-if="action==='选择器'">
                        
                        </template>
                        <template v-else>
                            <el-table-column label="操作" width="66" fixed="right">
                                <template slot-scope="scope">
                                    <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                                        <div>
                                            <el-button size="mini" type="text" icon="el-icon-edit"
                                                       @click="()=>triggerModify(scope.row)"> 修改
                                            </el-button>
                                            <el-button size="mini" type="text" icon="el-icon-notebook-1"
                                                       @click="()=>openLog(scope.row)">变更日志
                                            </el-button>
                                            <el-button size="mini" type="text" icon="el-icon-delete"
                                                       @click="()=>handleDelete(scope.row)">删除
                                            </el-button>
                                        </div>
                                        <el-button slot="reference" type="text">操作</el-button>
                                    </el-popover>
                                </template>
                            </el-table-column>
                        </template>
                    </template>
                
                
                </el-table>
                <el-pagination :background="true" style="padding: 20px;" :current-page.sync="queryParams.pageNum"
                               :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"
                               @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                               @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"></el-pagination>
            </section>
        </div>
    
    </div>
</template>
<script>  import { formData, formMethod, PageData } from '@/utils/formcommon';
import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
import { default as FormDialog } from '@codegenarate/mydialogplus';
import * as  api from '@/apis/mesBpmHandle.api.js';

const dicInner = {
  '___mes_bpm_handle_id': '主键ID',
  'mes_bpm_handle_id': 'mes_bpm_handle_id',
  '___mes_bpm_handle_name': '名称',
  'mes_bpm_handle_name': 'mes_bpm_handle_name',
  '___mes_bpm_handle_code': '标识码',
  'mes_bpm_handle_code': 'mes_bpm_handle_code',
  '___mes_bpm_handle_handleType': '处理类型1内部方法     5外部接口',
  'mes_bpm_handle_handleType': 'mes_bpm_handle_handleType',
  '___mes_bpm_handle_state': '状态 1 待审核 5使用中 10己关闭',
  'mes_bpm_handle_state': 'mes_bpm_handle_state',
  '___mes_bpm_handle_handleValue': '业务状态标识码',
  'mes_bpm_handle_handleValue': 'mes_bpm_handle_handleValue',
  '___mes_bpm_handle_handleParam': '业务状态标识码',
  'mes_bpm_handle_handleParam': 'mes_bpm_handle_handleParam',
  '___mes_bpm_handle_handleHead': '业务状态标识码',
  'mes_bpm_handle_handleHead': 'mes_bpm_handle_handleHead',
  '___mes_bpm_handle_classId': '所属分类',
  'mes_bpm_handle_classId': 'mes_bpm_handle_classId',
  '___mes_bpm_handle_classIdPath': '所有分类路径',
  'mes_bpm_handle_classIdPath': 'mes_bpm_handle_classIdPath',
  '___mes_bpm_handle_describeInfo': '备注',
  'mes_bpm_handle_describeInfo': 'mes_bpm_handle_describeInfo',
  '___mes_bpm_handle_remarks': '备注',
  'mes_bpm_handle_remarks': 'mes_bpm_handle_remarks',
  '___mes_bpm_handle_tenantType': '租户类型 1应用管理者2应用消息者',
  'mes_bpm_handle_tenantType': 'mes_bpm_handle_tenantType',
  '___mes_bpm_handle_tenantId': '租户ID',
  'mes_bpm_handle_tenantId': 'mes_bpm_handle_tenantId',
  '___mes_bpm_handle_delState': '有效状态[数据字典=del_state] 1有效  5删除',
  'mes_bpm_handle_delState': 'mes_bpm_handle_delState',
  '___mes_bpm_handle_addUser': '添加人',
  'mes_bpm_handle_addUser': 'mes_bpm_handle_addUser',
  '___mes_bpm_handle_addUserId': '添加人ID',
  'mes_bpm_handle_addUserId': 'mes_bpm_handle_addUserId',
  '___mes_bpm_handle_addTime': '添加时间',
  'mes_bpm_handle_addTime': 'mes_bpm_handle_addTime',
  '___mes_bpm_handle_editUser': '最近更新人',
  'mes_bpm_handle_editUser': 'mes_bpm_handle_editUser',
  '___mes_bpm_handle_editUserId': '最近更新人ID',
  'mes_bpm_handle_editUserId': 'mes_bpm_handle_editUserId',
  '___mes_bpm_handle_lastEditTime': '最近更新时间',
  'mes_bpm_handle_lastEditTime': 'mes_bpm_handle_lastEditTime',
  '___mes_bpm_handle_serverNumber': '服务器编号ID',
  'mes_bpm_handle_serverNumber': 'mes_bpm_handle_serverNumber',
};
import { alertFail, alertWithPaylod } from '@/utils/alertUtil';

export default {
  name: 'mesBpmHandlelist',
  data() {
    return {
      /*
      * 1. 选择器
      *
      * */
      action: '',
      api: api,
      dicInner, ...formData,
      queryParams: {
        searchKey: '',
        'id': '',
        'name': '',
        'code': '',
        'handleType': '',
        'state': '',
        'handleValue': '',
        'handleParam': '',
        'handleHead': '',
        'classId': '',
        'classIdPath': '',
        'describeInfo': '',
        'remarks': '',
        'tenantType': '',
        'tenantId': '',
        'delState': '',
        'addUser': '',
        'addUserId': '',
        'addTime': '',
        'editUser': '',
        'editUserId': '',
        'lastEditTime': '',
        'serverNumber': '', ...PageData,
      },
      lists: [],
      selectRows: [],
      classId: '',
      classIdPath: '',
      className: '',
      loading: false,
      isFold: false,
      tableRowClassName({ row, rowIndex }) {
        if (row.rowType == 'total') {
          return 'total-row';
        }
        return '';
      },
    };
  },
  components: {
    svgIcon: () => import('@codegenarate/svg-icon'),
    dicSelect: () => import('@/components/dicselect.vue'),
    dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
    RightToolbar: () => import('@/components/RightToolbar/index.vue'),
    modify: () => import('./modify'),
    leftTree: () => import('@/components/classTree/index.vue'),
  },
  mounted() {
  
  },
  filters: { dateFormatYYYYMMDD: dateFormatYYYYMMDD },
  computed: {},
  watch: {},
  methods: {
    ...formMethod,
    /**
     * @description:
     * @params _data.action
     * @return
     */
    initByDialog(_data) {
      this.action = _data && _data.action;
      
    },
    submitByDialog() {
      //没有选中
      if (this.selectRows.length <= 0) {
        alertFail('请选中');
        return { success: false };
      }
      var ones = this.selectRows;
      return { success: true, data: ones && ones[0] };
    },
    nodeClick(node) {
      this.queryParams.pageNum = 1;
      this.queryParams.classId = node && node.id;
      this.queryParams.className = node && node.name;
      this.queryParams.classIdPath = `${node && node.parentIdPath},${node && node.id}`;
      this.getInfoList();
    },
    async dbclick(row) {
      if (this.action == '选择器') {
        var result = await this.submitByDialog();
        this.$emit('success',result);
      }
    },
    tableRowClickOnece(row, tableRef, options) {
      var table = this.$refs[tableRef];
      if (options && options.canSelect) {
        var istrue = options.canSelect(row);
        if (!istrue) {
          table && table.toggleRowSelection(row, false);
        }
      }
      table && table.clearSelection();
      table && table.toggleRowSelection(row);
    }, async triggerModify(row) {
      var classId = this.queryParams.classId;
      var className = this.queryParams.className;
      var classIdPath = this.queryParams.classIdPath;
      var result = await FormDialog({
        width: '555px',
        title: row?.id ? '编辑事件处理' : '新增事件处理', data() {
          return {
            ...row,
            classId,
            className,
            classIdPath,
          };
        }, components: { modify: () => import('./modify.vue') },
      });
      if (!(result && result.success)) {
        return result;
      }
      this.getInfoList();
    },
  },
};</script>
